<template>
  <div class="good-detail">
    <el-row>
      <el-col :sm="12" :xs="24" style="padding: 10px;" class="line">
        <el-card shadow="hover" v-if="goodInfo != null" class="goodInfo board">
          <img :src="goodInfo.Picture" class="goodPicture"/>
          <div class="goodMore">
            <div>{{goodInfo.Name}}</div>
            <div>{{goodInfo.Des}}</div>
            <div>当前状态：
              <span v-if="goodInfo.State == 'online'" style="color:green">
                {{goodInfo.State}}
              </span>
              <span v-else style="color:red">
                {{goodInfo.State}}
              </span>
            </div>
            <div>更新于：{{sToT(goodInfo.Updated)}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :xs="24" style="padding: 10px;" class="line line-r">
        <el-card shadow="hover" v-if="goodInfo != null" class="dealInfo board">
          <div class="title">近期交易</div>
          <div class="content">
            <div v-if="deals==null || deals.length==0" style="text-align: center; text-indent: 0;">暂无数据</div>
            <div v-for="deal in deals" :key="deal">
              {{sToT(deal._source.updated)}}&nbsp;&nbsp;单价:{{deal._source.deal_cost/100}}&nbsp;&nbsp;数量:{{deal._source.num}}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :xs="24" style="padding: 10px;" class="line">
        <el-card shadow="hover" v-if="goodInfo != null" class="saleInfo board">
          <div class="title">在售</div>
          <el-button class="active-btn" @click="buy()">去购买</el-button>
          <div class="content">
            <div v-if="sales==null || sales.length==0" style="text-align: center; text-indent: 0;">暂无数据</div>
            <div v-for="sale in sales" :key="sale">
              {{sToT(sale._source.updated)}}&nbsp;&nbsp;单价:{{sale._source.min_price/100}}&nbsp;&nbsp;剩余:{{sale._source.left_num}}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :xs="24" style="padding: 10px;" class="line line-r">
        <el-card shadow="hover" v-if="goodInfo != null" class="buyInfo board">
          <div class="title">求购</div>
          <el-button class="active-btn" @click="sale()">去出售</el-button>
          <div class="content">
            <div v-if="buys==null || buys.length==0" style="text-align: center; text-indent: 0;">暂无数据</div>
            <div v-for="buy in buys" :key="buy">
              {{sToT(buy._source.updated)}}&nbsp;&nbsp;单价:{{buy._source.max_price/100}}&nbsp;&nbsp;剩余:{{buy._source.left_num}}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-drawer v-model="buyDrawerShow" :direction="'btt'" size="300">
      <template #header>
        <h4>发布求购单</h4>
      </template>
      <template #default>
        过期时间：
        <el-radio v-model="waitType" label="Wait1M" size="large">
          1分钟
        </el-radio>
        <el-radio v-model="waitType" label="Wait1H" size="large">
          1小时
        </el-radio>
        <el-radio v-model="waitType" label="Wait1D" size="large">
          1天
        </el-radio>
        <div>
          购买数量：
          <el-input placeholder="请输入购买数量" v-model.number="num" type="number" style="width: 200px"/>
        </div>
        <div>
          购买价格：
          <el-input placeholder="可接受的最高价格" v-model.number="price" type="number" style="width: 200px"/>
          <strong style="color: #ff9300">（单位/分）</strong>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick()">取消</el-button>
          <el-button type="primary" @click="buyCommit()">发布</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="saleDrawerShow" :direction="'btt'" size="300">
      <template #header>
        <h4>发布供应单</h4>
      </template>
      <template #default>
        过期时间：
        <el-radio v-model="waitType" label="Wait1M" size="large">
          1分钟
        </el-radio>
        <el-radio v-model="waitType" label="Wait1H" size="large">
          1小时
        </el-radio>
        <el-radio v-model="waitType" label="Wait1D" size="large">
          1天
        </el-radio>
        <div>
          出售数量：
          <el-input placeholder="请输入出售数量" v-model.number="num" type="number" style="width: 200px"/>
        </div>
        <div>
          出售价格：
          <el-input placeholder="可接受的最低价格" v-model.number="price" type="number" style="width: 200px"/>
          <strong style="color: #ff9300">（单位/分）</strong>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick()">取消</el-button>
          <el-button type="primary" @click="saleCommit()">发布</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import { serverConfig } from '../http/config/index'
import { goodDetail } from '../http/api/good'
import { salePub, buyPub } from '../http/api/deal'
import { dealsCurrent, salesSToB, buysBToS } from '../http/api/es'
import { ElMessage, ElMessageBox } from 'element-plus'
import store from '@/store'
import router from '@/router'

export default {
  data() {
    return {
      goodInfo: null,
      deals: null,
      sales: null,
      buys: null,

      buyDrawerShow: false,
      saleDrawerShow: false,

      waitType: "Wait1H",
      price: null,
      num: null
    }
  },
  created: function() {
    let that = this
    goodDetail(this.$route.params.goodId)
    .then((res) => {
      that.goodInfo = res.data.data
      that.goodInfo.Picture = serverConfig.baseURL + "/goodcenter/nil/image/" + that.goodInfo.Picture

      dealsCurrent(res.data.data.GoodId)
      .then((res) => {
        that.deals = res.hits.hits
      })      
      salesSToB(res.data.data.GoodId)
      .then((res) => {
        that.sales = res.hits.hits
      })
      buysBToS(res.data.data.GoodId)
      .then((res) => {
        that.buys = res.hits.hits
      })
    })
  },
  methods: {
    sToT: function(timeStamp) {
      let d = new Date(timeStamp)
      return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()
    },
    buy: function() {
      this.buyDrawerShow = true
    },
    sale: function() {
      this.saleDrawerShow = true
    },
    buyCommit: function() {
      if (store.getters.power == null || store.getters.power > 0) {
        router.push({name: 'LoginPage'})
        return
      }
      if (this.num == null || this.num <= 0 || this.price == null || this.price <= 0) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '数据非法'
        })
        return
      }
      buyPub(this.goodInfo.GoodId, this.price, this.num, this.waitType)
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '发布成功'
          })
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '余额不足'
          })
        }
      })
    },
    saleCommit: function() {
      if (this.num == null || this.num <= 0 || this.price == null || this.price <= 0) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '数据非法'
        })
        return
      }
      salePub(this.goodInfo.GoodId, this.price, this.num, this.waitType)
      .then((res) => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '发布成功'
          })
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '余额不足'
          })
        }
      })
    },
    cancelClick: function() {
      this.buyDrawerShow = false
      this.saleDrawerShow = false
      ElMessage({
        showClose: true,
        type: 'info',
        message: '取消'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @imgSize: 206px;

  .good-detail {
    .line {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      .board {
        height: 250px;
        width: 500px;
        max-width: 100%;
        .title {
          font-size: 20px;
          text-align: center;
        }
        .active-btn {
          position: absolute;
          right: 20px;
          top: 20px;
        }
        .content {
          margin-top: 20px;
          height: 150px;
          border: 1px solid var(--el-card-border-color);
          border-radius: 3px;
          background-color: rgba(0, 0, 0, 0.2);
          text-indent: 2em;
          padding-top: 10px;
        }
      }
      .goodInfo {
        .goodPicture {
          vertical-align: bottom;
          display: inline-block;
          width: @imgSize;
          height: @imgSize;
        }
        .goodMore {
          height: @imgSize;
          width: calc(100% - @imgSize);
          display: inline-flex;
          flex-direction: column;
          justify-content: space-between;
          div:nth-child(1) {
            font-size: 22px;
            text-align: center;
          }
          div:nth-child(2) {
            font-size: 16px;
            text-align: left;
            text-indent: 2em;
            padding: 10px 0 0 10px;
            height: 85px;
            overflow: hidden;
          }
          div:nth-child(3) {
            font-size: 16px;
            text-align: left;
            padding: 10px 0 0 10px;
          }
          div:nth-child(4) {
            font-size: 12px;
            text-align: right;
          }
        }
      }
    }
    .line.line-r {
      justify-content: flex-start;
    }
  }

  @media screen and (max-width: 768px) {
    .good-detail {
      .line {
        justify-content: center;
      }
      .line.line-r {
        justify-content: center;
      }
    }
  }
</style>